<template>
	<view class="formItem f16" :class="[isfocus?'focus':'']"> 
		<view class="text">{{lable}}</view>
		<view class="f16">
			<slot :value="value">
				<input v-if="maxlength" :maxlength="maxlength" :disabled="disable" :value="ivalue" :type="type" :placeholder="placeholder" @focus="myfocus()" @blur="myblur()" @input="onchange"/>
				<input v-else  :disabled="disable" :value="ivalue" :type="type" :placeholder="placeholder" @focus="myfocus()" @blur="myblur()" @input="onchange"/>
			</slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "formIten",
		props: {
			formData:"",
			lable:"",
			placeholder:"",
			type:"",
			value:"",
			objkey:'',
			disable:false,
			className:[],
			maxlength:""
		},
		data() {
			return {
				isfocus:false,
				ivalue:this.$props.value,
				myclass:""
			}
		},
		onLoad() {
		},
		methods: {
			myfocus(){
				this.isfocus=true
			},
			myblur(){
				this.isfocus=false
			},
			onchange(e){
				this.ivalue = e.detail.value;
				let a = {
					valule:e.detail,
					key:this.$props.objkey
				}
				this.$emit('child',a)
			},
			reset(){
				this.ivalue=""
			}
		},
		watch:{
			value(val){
				this.ivalue = val
			}
		}
		
	}
</script>

<style lang="less" scoped>
	@import '@/common/common.less';
	.formItem{
		border-bottom: 1rpx solid #e1e1e1;
		display: flex;
		flex-direction: row;
		padding-left: 39rpx;
		height: 101rpx;
		align-items: center;
		position: relative;
		color: #555555;
		.lefticon{
			margin-right: 28rpx;
			color: @primary-color;
		}
		.text{
			color: #555555;
			margin-right: 60rpx;
			width: 144rpx;
		}
	}
	.focus{
		border-bottom: 1rpx solid @primary-color;
	}
	
</style>
